<style lang="less">
</style>

<template>
    <div class="status-box">
        <el-tag v-if="item.deleted" type="danger">已删除</el-tag>
        <div v-else-if="item.status === statusMap.ONLINE">
            <div v-if="item.end_at && item.end_at <= getTimestamp()">
                <el-tag type="danger">已过期</el-tag><br>
                <span class="date">{{item.end_at | date}}</span>
            </div>
            <div v-else-if="item.published_at > getTimestamp()">
                <el-tag type="warning">定时发布</el-tag><br>
                <span class="date">{{item.published_at | date}}</span>
            </div>
            <div v-else-if="item.start_at > getTimestamp()">
                <el-tag type="warning">定时发布</el-tag><br>
                <span class="date">{{item.start_at | date}}</span>
            </div>
            <el-tag v-else :type="statusAlias[statusMap.ONLINE].icon">{{statusAlias[statusMap.ONLINE].name}}</el-tag>
        </div>
        <el-tag v-else-if="statusAlias[item.status]" :type="statusAlias[item.status].icon">{{statusAlias[item.status].name}}</el-tag>

        <el-tag v-if="item.recommended === recommendedMap.RECOMMENDED" type="success">推荐</el-tag>
    </div>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default() {
                return [{
                    status: 0,
                    published_at: 0,
                    start_at: 0,
                    end_at: 0
                }];
            }
        },
        Model: {
            type: Function,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            defaultStatusMap: {
                PENDING: 0,
                ONLINE: 1,
                OFFLINE: 2,
                REJECTED: 3,
                DEBUG: 9
            },
            defaultRecommendedMap: {
                NOT_RECOMMENDED: 0,
                RECOMMENDED: 1
            }
        };
    },
    computed: {
        statusMap() {
            return {
                PENDING: this.Model.PENDING || this.defaultStatusMap.PENDING,
                ONLINE: this.Model.ONLINE || this.defaultStatusMap.ONLINE,
                OFFLINE: this.Model.OFFLINE || this.defaultStatusMap.OFFLINE,
                REJECTED: this.Model.REJECTED || this.defaultStatusMap.REJECTED,
                DEBUG: this.Model.DEBUG || this.defaultStatusMap.DEBUG
            };
        },
        statusAlias() {
            return {
                [this.getAliasKey('PENDING')]: {
                    icon: 'warning',
                    name: '待审核'
                },
                [this.getAliasKey('ONLINE')]: {
                    icon: 'success',
                    name: '已上架'
                },
                [this.getAliasKey('OFFLINE')]: {
                    icon: 'gray',
                    name: '已下架'
                },
                [this.getAliasKey('REJECTED')]: {
                    icon: 'danger',
                    name: '未通过'
                },
                [this.getAliasKey('DEBUG')]: {
                    icon: 'info',
                    name: '调试'
                }
            };
        },
        recommendedMap() {
            return {
                NOT_RECOMMENDED: this.Model.NOT_RECOMMENDED || this.defaultRecommendedMap.NOT_RECOMMENDED,
                RECOMMENDED: this.Model.RECOMMENDED || this.defaultRecommendedMap.RECOMMENDED
            };
        }
    },
    methods: {
        getAliasKey(key) {
            return this.Model[key] === undefined ? this.defaultStatusMap[key] : this.Model[key];
        },
        getTimestamp(date) {
            return Math.floor(((date && date.getTime()) || Date.now()) / 1000);
        }
    }
};
</script>

